//动态表单设计器

import React, { useState, useEffect }  from 'react';
import { Row, Col, Modal, Button, Form, Input,Divider } from 'antd';

import { BorderlessTableOutlined
} from '@ant-design/icons';



export default function Dynamic_Form_Designer(prop){

    const box={}

    const wrapper={
        width:"100%",
        height:"100%",
        background: "#f3f3f3",
        textAlign:"center",
        display:"grid",
        gridTemplateColumns: "repeat(10, auto)",
        gridTemplateRows: "repeat(20, auto);",
        // justifyItems:"center",
        // alignItems:"center"
        //justifyContent:"stretch"

    }
    const item={
        textAlign: "center",
        border:"1px solid #fff",
        color:"#fff",
        fontWeight: "bold",
        // lineHeight: "150px",
        background:"#00a0a0"
    }


    return(
            <div
                style={box}
                // style={{ display: "flex"}}
            >
                <Row>
                    <span draggable="true" onDragOver={allowDrop}> <BorderlessTableOutlined/></span>
                </Row>
                <Divider/>
                <Row style={{height:"95vh",border:"2px solid #999999",}}>
                    <div  id="mainDiv" style={{width:"100%", height:"100%",}} onDrop={drop} onDragOver={allowDrop}>

                        <div style={wrapper}>
                            <div style={item}>1</div>
                            <div style={item}>2</div>
                            <div style={item}>3</div>
                            <div style={item}>1</div>
                            <div style={item}>2</div>
                            <div style={item}>3</div>
                            <div style={item}>1</div>
                            <div style={item}>2</div>
                            <div style={item}>3</div>
                            <div style={item}>1</div>
                            <div style={item}>2</div>
                            <div style={item}>3</div>
                            <div style={item}>1</div>
                            <div style={item}>2</div>
                            <div style={item}>3</div>
                            <div style={item}>1</div>
                            <div style={item}>2</div>
                            <div style={item}>3</div>
                            <div style={item}>1</div>
                            <div style={item}>2</div>
                            <div style={item}>3</div>
                            <div style={item}>1</div>
                            <div style={item}>2</div>
                            <div style={item}>3</div>
                            <div style={item}>1</div>
                            <div style={item}>2</div>
                            <div style={item}>3</div>
                            <div style={item}>1</div>
                            <div style={item}>2</div>
                            <div style={item}>3</div>
                            <div style={item}>1</div>
                            <div style={item}>2</div>
                            <div style={item}>3</div>
                            <div style={item}>1</div>
                            <div style={item}>2</div>
                            <div style={item}>3</div>
                            <div style={item}>1</div>
                            <div style={item}>2</div>
                            <div style={item}>3</div>
                            <div style={item}>1</div>
                            <div style={item}>2</div>
                            <div style={item}>3</div>
                            <div style={item}>1</div>
                            <div style={item}>2</div>
                            <div style={item}>3</div>
                            <div style={item}>1</div>
                            <div style={item}>2</div>
                            <div style={item}>3</div>
                            <div style={item}>2</div>
                            <div style={item}>3</div>
                            <div style={item}>1</div>
                            <div style={item}>2</div>
                            <div style={item}>3</div>
                            <div style={item}>1</div>
                            <div style={item}>2</div>
                            <div style={item}>3</div>
                            <div style={item}>1</div>
                            <div style={item}>2</div>
                            <div style={item}>3</div>
                            <div style={item}>1</div>
                            <div style={item}>2</div>
                            <div style={item}>3</div>
                            <div style={item}>1</div>
                            <div style={item}>2</div>
                            <div style={item}>3</div>
                            <div style={item}>1</div>
                            <div style={item}>2</div>
                            <div style={item}>3</div>
                            <div style={item}>1</div>
                            <div style={item}>2</div>
                            <div style={item}>3</div>
                            <div style={item}>1</div>
                            <div style={item}>2</div>
                            <div style={item}>3</div>
                            <div style={item}>1</div>
                            <div style={item}>2</div>
                            <div style={item}>3</div>
                            <div style={item}>1</div>
                            <div style={item}>2</div>
                            <div style={item}>3</div>
                            <div style={item}>1</div>
                            <div style={item}>2</div>
                            <div style={item}>3</div>
                            <div style={item}>1</div>
                            <div style={item}>2</div>
                            <div style={item}>3</div>
                            <div style={item}>1</div>
                            <div style={item}>2</div>
                            <div style={item}>3</div>
                            <div style={item}>1</div>
                            <div style={item}>2</div>
                            <div style={item}>3</div>
                            <div style={item}>1</div>
                            <div style={item}>2</div>
                            <div style={item}>3</div>
                            <div style={item}>1</div>
                            <div style={item}>2</div>
                            <div style={item}>3</div>
                            <div style={item}>2</div>
                            <div style={item}>3</div>
                        </div>

                    </div>
                </Row>
            </div>
    )
}

function allowDrop(event)
{
    event.preventDefault();
};

function drop(event)
{
   event.preventDefault();
   console.log(event.target)
   //  var textnode=document.createTextNode("Water");
   // event.target.appendChild(textnode);

  let dom="";
     dom=`<div style="            width:450px;
            background: #f3f3f3;
            text-align:center;
            display: grid;
            grid-template-columns: 150px 150px 150px;
            grid-template-rows: 150px 150px 150px">
            <div style="text-align: center;
            border:1px solid #fff;
            color:#fff;
            font-weight: bold;
            line-height: 150px;background:#ef342a">1</div>
             <div style="text-align: center;
            border:1px solid #fff;
            color:#fff;
            font-weight: bold;
            line-height: 150px;background:#00a0a0;">2</div>
           <div style="text-align: center;
            border:1px solid #fff;
            color:#fff;
            font-weight: bold;
            line-height: 150px;  background:#a0a0ff;"}>3</div>
                        </div>`
   // event.target.$('#mainDiv').append(dom)
  event.target.innerHTML =dom;


}


